<template>
   <div>
      <div>
         <Button style="float: left; margin-right: 8px" icon="ios-add" type="primary" shape="circle"
            @click="initmodal1()">添加专业大类</Button>
         <Modal v-model="modal1" title="添加专业大类" @on-ok="addMajor()" width=430 scrollable>
            专业大类：
            <Select v-model="McId" style="width:300px">
               <Option value="一级学科">一级学科</Option>
               <Option value="二级学科">二级学科</Option>
            </Select>
            <br><br>
            大类名称： <Input v-model="McName" placeholder="输入大类名称" style="width: 300px" clearable></Input>
         </Modal>
      </div>
      <br><br><br>
      <Table border :columns="columnshead" :data="datat">
         <template slot-scope="{ row,index }" slot="mcId">
            <Select v-model="editId" v-if="editIndex === index">
               <Option value="一级学科">一级学科</Option>
               <Option value="二级学科">二级学科</Option>
            </Select>
            <span v-else>{{ row.mcId }}</span>
         </template>
         <template slot-scope="{ row,index }" slot="mcName">
            <Input type="text" v-model="editName" v-if="editIndex === index" />
            <span v-else>{{ row.mcName }}</span>
         </template>
         <template slot-scope="{ row,index }" slot="action">
            <div v-if="editIndex === index">
               <Button size="small" @click="handleSave(index)">保存</Button>
               <Button size="small" @click="editIndex = -1">取消</Button>
            </div>
            <div v-else>
               <Button type="primary" size="small" @click="modify(row, index)">修改</Button>
            </div>
         </template>
      </Table>
      <br>
      <div style="margin: 10px;overflow: hidden">
         <div style="float: right">
            <Page :total="total" :current="1" show-elevator show-total @on-change="changePage"></Page>
         </div>
      </div>
   </div>
</template>

<script>
   export default {
      data() {
         return {
            columnshead: [
               {
                  title: '专业大类',
                  slot: 'mcId',
                  filters: [
                     {
                        label: '一级学科',
                        value: 1
                     },
                     {
                        label: '二级学科',
                        value: 2
                     }
                  ],
                  filterMultiple: false,
                  filterMethod(value, row) {
                     if (value === 1) {
                        return row.mcId == '一级学科';
                     } else if (value === 2) {
                        return row.mcId == '二级学科';
                     }
                  }
               },
               {
                  title: '大类名称',
                  slot: 'mcName',
                  sortable: true
               },
               {
                  title: '操作',
                  slot: 'action',
                  width: 130,
                  align: 'center'
               }
            ],
            datat: [],
            editIndex: -1,  // 当前聚焦的输入框的行数
            editId: '',
            editName: '',
            total: 1,
            McName: '',
            McId: '',
            modal1: false
         }
      },
      created() {
         this.$axios.get(this.$host + '/professional/management/allMajorClasses?pageNum=1&&pageSize=10').then(res => {
            this.total = res.data.data.total
            this.datat = res.data.data.list
         })
      },
      methods: {
         modify(row, index) {
            this.editName = row.mcName;
            this.editId = row.mcId;
            this.editIndex = index;
         },
         handleSave(index) {
            if (this.datat[index].mcName == this.editName && this.datat[index].mcId == this.editId) {
               this.$Message.info('大类信息没有修改')
            }
            else {
               this.$axios.put(this.$host + '/professional/management/majorClass', {
                  beforeName: this.datat[index].mcName,
                  afterId: this.editId,
                  afterName: this.editName
               }).then(res => {
                  if (res.data.message == '更新专业大类信息成功') {
                     this.$Message.success('专业大类更新成功')
                     this.datat[index].mcName = this.editName;
                     this.datat[index].mcId = this.editId;

                  }
                  else {
                     this.$Message.error('专业大类更新失败')
                  }
               })
            }
            this.editIndex = -1;
         },
         changePage(currentPage) {
            this.$axios.get(this.$host + '/professional/management/allMajorClasses?pageNum=' + currentPage + '&&pageSize=10').then(res => {
               this.datat = res.data.data.list
            })
         },
         addMajor() {
            this.$axios.post(this.$host + '/professional/management/newMajorClass', {
               mcId: this.McId,
               mcName: this.McName
            }).then(res => {
               if (res.data.message == '增加专业大类成功') {
                  this.$Message.success('专业大类添加成功')
                  if (this.datat.length == 10) {
                     this.datat.pop()
                  }
                  this.datat.unshift({
                     mcId: this.McId,
                     mcName: this.McName
                  })
                  ++this.total
               }
               else {
                  this.$Message.error('大类已存在，添加失败')
               }
            })
         },
         initmodal1(){
            this.modal1 =  true
            this.McId = ''
            this.McName = ''
         }
      }
   }
</script>